<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/seamless-immutable/7.1.4/seamless-immutable.development.js"></script>
<script type="text/babel">
    /* 
        Immutale是一个数据结构持久化库 
        特点：相比深拷贝不占用太大内存
        缺点： 需要学习它的语法 学习成本高
    */
    class App extends React.Component{
        state = {
            // 创建不可变的数据结构
            user:Immutable({
                name:"张三",
                age:18,
                list:[
                    {
                        like:"学习"
                    }
                ]
            })
        }
        shouldComponentUpdate(nextProps,nextState){
            
            if(nextState.user.age !== this.state.user.age || nextState.user.name!==this.state.user.name){
                return true
            }
            return false
        }
        render(){
            console.log("渲染啦....")
            let {user} = this.state;
            console.log(user)
            return (
                <div>
                    <h1>{user.name}---{user.age}</h1>
                    <button onClick={()=>{
                    // 设置数据结构中的属性 参数一 要设置的对象 参数二 要设置的各级属性 user =>name=>age ["属性名"、属性名...] 参数三 属性值
                      let newUser = Immutable.setIn(user,["name"],'李四');
                      let newObje = Immutable.setIn(newUser,["list","0","like"],"游戏")
                      let newSex = Immutable.setIn(newObje,["sex"],"男")
                      console.log(newSex)
                      this.setState({
                        user:newSex
                      })
                    }}>改变</button>
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>